// import React from 'react'
// import './thirdPage.css'
// class SecondPage extends React.Component{
//     constructor(props){
//         super(props)
//         this.state={

//         }
//     }
//     componentDidMount(){
        
//     }
//     render(){
//         return <div className="thirdPage">
//                   <div className="countHeader">
// 							<span>热门文章前五</span>
// 						</div>
// 						<div className="chartBox">
							
							  
//                         </div>
                        
//                 <div className="upSlide">
//                             <a href="#/secondPage" >上一页</a>
//                             &nbsp;&nbsp;
// 						</div>
//             </div>
//     }
// }
// export default SecondPage

import React, { useState } from 'react';

const ExampleName = (props) => {
  // 你可以在这使用 Hook
const [name, setName] = useState('又名张三') 
return <div>
  {
                        props.arr.map((item, index) => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
                            return (
                                <li key={index}>
                                    评论是:{item}
                                </li>
                            )
                        })
                    }
</div>;
}

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState('0');
  const [arr, setArr] = useState(['张三',  '李四',  '王五'])
  return (
    <div>
      <ExampleName name="法外狂徒" arr={arr}></ExampleName>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example